<template>
  <div class="position-relative">
    <el-switch
      class="editor-btn"
      v-model="previewStyle"
      inactive-color="#13ce66"
      active-text="边写边看"
      active-value="vertical"
      inactive-text="全屏编辑"
      inactive-value="tab">
    </el-switch>
    <TuiEditor :html="content"  @input="getHtml"
      :options="options" :height="height" :previewStyle="previewStyle"
      ref="tuiEditor"/>
  </div>
</template>
<script>
export default {
  title: "文章编辑",
  model: {
    prop: 'content',
    event: 'change'
  },
  props: {
    content: {
      type: String,
      default: ''
    },
    height: {
      type: String,
      default: '600px'
    }
  },
  mounted() {
    this.editorText = this.value
  },
  data() {
    return {
      editorText: '',
      previewStyle: 'vertical',
      options: {
        language: 'zh_CN',
      },
      editorHtml: ''
    }
  },
  methods: {
    getHtml() {
      let html = this.$refs.tuiEditor.invoke('getHtml');
      this.$emit('change', html)
    }
  }
  
}
</script>
<style lang="scss">
  .tui-editor-defaultUI .CodeMirror-lines {
    padding: 18px;
  }
  .editor-btn {
    position: relative;
    position: absolute;
    top: 6px;
    right: 20px;
    z-index: 1;
  }
</style>